<template>
    <div class="login_con1">
        <div class="logo_box">
            <a href="#/">
                <img src="/static/images/logo.png" alt="" srcset="">
            </a>
            <a href="#/" class="back">
                <img src="/static/images/back.png" alt="">
                <span>返回首页</span>
            </a>
        </div>
        <div class="login_box">
            <div class="login_right" v-if="type==='login'">
                <div class="login_title">
                    登录
                </div>
                <ul class="login_list">
                    <li class="login_item">
                        <div class="ltitle">用户名：</div>
                        <input type="text" v-model="username">
                    </li>
                    <li class="login_item">
                        <div class="ltitle">密码：</div>
                        <input type="password" v-model="password">
                    </li>
                </ul>
                <div class="login_btn" @click="login">登录</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            type:'login',
            username:'',
            realname:'',
            password:'',
            group_id:1
        }
    },
    watch:{
        group_id:{
            handler(newval,oldval){
                console.log(newval)
            },
            deep:true
        }
    },
    methods:{
        change(type){
            this.type = type
        },
        register(){
            if(!this.username){
                alert('电话号码不能为空！')
            }else if(!this.realname){
                alert('请先填写您的真实姓名！')
            }else if(!this.password){
                alert('请先填写您的密码！')
            }else{
                this.$api.post('register',{
                    "username":this.username,
                    "password":this.password,
                    "realname":this.realname,
                    "group_id":this.group_id
                }).then(res=>{
                    if(res.code==200){
                        alert(res.data.msg+'去登录')
                        this.username = ''
                        this.password = ''
                        this.type = 'login'
                    }else{
                        alert(res.message+'去登录')
                        this.username = ''
                        this.password = ''
                        this.type = 'login'
                    }
                })
            }
            
        },
        login(){
            if(!this.username){
                alert('电话号码不能为空！')
            }else if(!this.password){
                alert('请先填写您的密码！')
            }else{
                this.$api.post('login',{
                    "username":this.username,
                    "password":this.password,
                }).then(res=>{
                    if(res.code==200){
                        alert('登录成功')
                        localStorage.setItem('token','Bearer '+res.data.token)
                        this.$router.go(-1)
                    }else{
                        alert(res.message+'请重新输入')
                    }
                })
            }
            
        }

    }
}
</script>
<style lang="scss" scoped>
@import  '@/assets/css/common.scss';
</style>